<template>
  <div class="table-data-view warpper">
    <div class="breadcrumb-view">
      <div class="breadcrumb-title">{{ $t($route.meta.title) }}</div>
    </div>
    <el-row style="margin-top: 14px" :gutter="20">
      <el-col :span="10">
        <el-input placeholder="请输入内容" v-model="getProduct.searchData" clearable @clear="conditionChange" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="conditionChange"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <table-list v-loading="isTbLoading" ref="tableView" class="table-list-view" :tableConfig="tableConfig" :tableData="tableData"></table-list>
    <!-- 分页区域 -->
    <!-- <div>
      <el-pagination style="margin-top: 10px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.getProduct.pageNow" :page-sizes="[10, 30, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div> -->
    <div>
      <table-pagination :total="total" :currentPage="this.getProduct.pageNow" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @reset="handlRreset"></table-pagination>
    </div>
  </div>
</template>

<script>
import { getProductStorage } from '@/api/productApi.js'

export default {
  data() {
    return {
      isTbLoading: true,
      // 表格配置对象
      tableConfig: {},
      // 表格数据数组
      tableData: [],
      // 查询条件
      options: [
        {
          value: 0,
          label: '请选择排序规则',
        },
        {
          value: 1,
          label: '按星级升序',
        },
        {
          value: 2,
          label: '按星级降序',
        },
        {
          value: 3,
          label: '按入库时间升序',
        },
        {
          value: 4,
          label: '按入库时间降序',
        },
        {
          value: 9,
          label: '按公司名称升序',
        },
        {
          value: 10,
          label: '按公司名称降序',
        },
      ],
      value: 0,
      search: '',
      // 获取产品入库数据请求参数对象
      getProduct: {
        handle: 0,
        pageNow: 1,
        pageSize: 10,
        searchData: '',
        type: 0,
        sortList: [0],
      },
      // 表格数据总条数
      total: 0,
    }
  },
  components: {
    tableList: () => import('@/components/common_tables.vue'),
    tablePagination: () => import('@/components/table_pagination.vue'),
  },
  created() {
    this.tableConfig = {
      isShowIndex: true,
      props: [
        { type: 'text', label: '单位名称', prop: 'companyName' },
        { type: 'text', label: '产品类型', prop: 'productCategory' },
        { type: 'text', label: '产品名称', prop: 'name' },
        { type: 'text', label: '状态', prop: 'state' },
      ],
      isOpt: true,
      optBtns: [{ label: '查看详情', callback: 'viewDetails', code: 'mgr_edit' }],
    }
    this.getProductInfo()
  },
  methods: {
    getProductInfo() {
      getProductStorage(this.getProduct).then((res) => {
        // console.log(res,"嘻嘻")
        let list = res.data.data.records
        let tb_productlist = []
        this.total = res.data.data.total
        // 数据结构不符，重构一个数组给表格遍历
        list.forEach((el) => {
          tb_productlist.push(el.productChangeRecordsResult)
        })
        this.tableData = tb_productlist
        this.isTbLoading = false
        // console.log(this.tableData, "蚂蚁雅黑");
      })
    },
    // 筛选条件改变
    conditionChange() {
      this.getProductInfo()
    },
    // 监听页容量
    handleSizeChange(newsize) {
      this.isTbLoading = true
      this.getProduct.pageNow = 1
      this.getProduct.pageSize = newsize
      this.getProductInfo()
    },
    // 监听页码
    handleCurrentChange(newpage) {
      this.isTbLoading = true
      this.getProduct.pageNow = newpage
      this.getProductInfo()
      console.log(this.total, 'tatal')
    },
    handlRreset() {
      this.getProduct.pageNow = 1
      this.getProductInfo()
    },
  },
}
</script>

<style></style>
